<template>
    <div>
        <h3>房型列表</h3>
        <a href="/hoomadd">去添加</a>
        房号
        <input type="text" v-model="page.hoomNumber">
        房型
        <select v-model="page.typeId">
            <option value="0">请选择</option>
            <option v-for="a in list" :value="a.typeId">{{ a.typeName }}</option>
        </select>
        时间
        <input type="date" v-model="page.createDate">
        <input type="button" class="btn btn-success" value="查询" @click="show">
        <table class="table">
            <thead>
                <tr>
                    <td>房号</td>
                    <td>房间类型</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{d.hoomNumber}}</td>
                    <td>{{d.typeName}}</td>
                    <td><img :src="axios.defaults.baseURL+d.img" style="height: 60px;width: 60px;"></td>
                    <td>{{d.state==1?"上架":"下架"}}</td>
                    <td>{{moment(d.createDate).format("YYYY-MM-DD HH:mm:ss")}}</td>
                    <td>
                        <input type="button" class="btn btn-success" value="删除" @click="del(d.id)">
                        <input type="button" class="btn btn-info" value="修改" @click="upda(d.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{ pageinfo.pagecount }}页 当前{{ page.index }}页
        一共{{ pageinfo.count }}行 每页显示{{ page.size }}行
        <input type="button" value="首页" @click="fenye(1)">
        <input type="button" value="上一页" @click="fenye(2)">
        <input type="button" value="下一页" @click="fenye(3)">
        <input type="button" value="尾页" @click="fenye(4)">
        <select v-model="page.size" @change="setsize">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <input type="button" v-for=" d in pageinfo.pagecount" :value="d" @click="xiaoanniu(d)">
        <input type="number" v-model="page.index"><input type="button" value="跳转" @click="tiaozhuan">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import {ref,onMounted} from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

//绑定
onMounted(()=>{
    bang();
    show();
})
const list=ref([{
    "typeId": 3,
    "typeName": "大床房",
    "isDel": false,
    "createUserId": 1,
    "createDate": "2025-06-02T00:00:00",
    "updateUserId": 1,
    "updateDate": "2025-06-02T00:00:00",
    "deleteUserId": 1,
    "deleteDate": "2025-06-02T00:00:00"
  }])
const bang=()=>{
    axios.get("/api/Hoom/GetHoomType").then(res=>{
        list.value=res.data;
    })
}
//显示
const data=ref([
    {
      "id": 1,
      "hoomNumber": "A1001",
      "typeId": 3,
      "img": "/Pic/c2cc083d-38e3-45c1-99d7-4bb9d397c77b1.jpg",
      "state": 1,
      "typeName": "大床房",
      "isDel": false,
      "createUserId": 1,
      "createDate": "2025-06-02T08:47:45.473",
      "updateUserId": 1,
      "updateDate": "2025-06-02T08:47:45.473",
      "deleteUserId": 1,
      "deleteDate": "2025-06-02T08:47:45.473"
    } 
])
const show=()=>{
    axios.get("/api/Hoom/GetHoom",{params:page.value}).then(res=>{
        data.value=res.data.listcount;//保存集合

        pageinfo.value.count=res.data.count;//总行数
        pageinfo.value.pagecount=Math.ceil(pageinfo.value.count/page.value.size);//总页数
    })
}

//分页
//分页条件
const page=ref({
    typeId:0,
    hoomNumber:"",
    createDate:"",
    index:1,//页码为1
    size:2//每页2条
})
const pageinfo=ref({
    count:0,//总行数
    pagecount:0//总页数
})
//页容量
const setsize=()=>{
    page.value.index=1;
    show();
}
//小按钮
const xiaoanniu=(val:any)=>{
    page.value.index=val;
    show();
}
//跳转
const tiaozhuan=()=>{
    if(page.value.index<=pageinfo.value.pagecount&&page.value.index>0){
        show();
    }
    else{
        page.value.index=1;
        show();
    }
}
//分页
const fenye=(val:any)=>{
    if(val==1){
        page.value.index=1;
        show();
    }
    if(val==2){
        if(page.value.index>1){
            page.value.index-=1;
            show();
        }
    }
    if(val==3){
        if(page.value.index<pageinfo.value.pagecount){
            page.value.index+=1;
            show();
        }
    }
    if(val==4){
        if(page.value.index=pageinfo.value.pagecount){
            show();
        }
    }
}
//删除
const del=(val:any)=>{
    if(!confirm("确认删除吗")){
        return;
    }
    axios.delete("/api/Hoom/DelHoom",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            show();
            return;
        }
        else{
            alert("删除失败");
            return;
        }
    })
}
//修改
const upda=(val:number)=>{
    router.push({path:'/hoomupda',query:{id:val}});
}
</script>

<style scoped>

</style>